<template>
    <div id="wl_sidebar" class="wl_sidebar">
        <a-menu class="wl_sidebar-main"
                mode="inline"
                :inline-collapsed="collapsed"
                style="width: 100%;overflow-y: auto;overflow-x: hidden;"
                v-model:selectedKeys="selectedKeys"
                @click="handleClick" >
            <a-menu-item key="Chart">
                <template #icon>
                    <PieChartOutlined />
                </template>
                <router-link to="/chart">图表页</router-link>
            </a-menu-item>
            <a-menu-item key="Table">
                <template #icon>
                    <DesktopOutlined />
                </template>
                <router-link to="/table">表格页</router-link>
            </a-menu-item>
            <a-sub-menu key="sub1">
                <template #icon>
                    <MailOutlined />
                </template>
                <template #title>表单页</template>
                <a-menu-item key="5">
                    <router-link to="/form1">Form1</router-link>
                </a-menu-item>
                <a-menu-item key="6">
                    <router-link to="/form2">Form2</router-link>
                </a-menu-item>
                <a-menu-item key="7">
                    <router-link to="/form3">Form3</router-link>
                </a-menu-item>
                <a-menu-item key="8">
                    <router-link to="/form4">Form4</router-link>
                </a-menu-item>
            </a-sub-menu>
        </a-menu>
        <a-divider style="margin: 1px 0;" />
        <div class="wl_sidebar-button">
            <ul @click="toggleCollapsed">
                <li>
                    <MenuFoldOutlined v-show="!collapsed" style="width: 20px;height: 20px;" />
                    <MenuUnfoldOutlined v-show="collapsed" style="width: 20px;height: 20px;" />
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { useRoute   } from 'vue-router'
    import { MenuUnfoldOutlined,MenuFoldOutlined,PieChartOutlined,MailOutlined,DesktopOutlined,InboxOutlined,AppstoreOutlined,ReadOutlined } from '@ant-design/icons-vue';
    interface Eventlist {
        key: String,
        doEvent: Event,
        eventKey: String,
        eventKeyPath: Array<any>,
        item? : Object,
        keyPath: Array<String>
    }
    const route = ref<any>(useRoute())
    const selectedKeys = ref<string[]>([route.value.name]);
    const collapsed = ref<boolean>(false);

    const toggleCollapsed = ()=> {
        collapsed.value = !collapsed.value
        /* 改变侧边栏宽度 */
        const dom = document.getElementById('wl_sidebar')
        if (dom && collapsed.value) dom.style.width = '48px'
        else if(dom && !collapsed.value) dom.style.width = '235px'
    }
    const handleClick = (e:Eventlist)=> {
        selectedKeys.value === [e.key]
    }
</script>

<style scoped>
    .wl_sidebar {
        background-color: #ffffff;
        width: 235px;
    }
    .ant-menu-sub.ant-menu-inlin {
        background-color: antiquewhite;
    }
</style>